<template>
  <van-row>
    <van-col span="24">
      <van-nav-bar
          title="我的电卡"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
      <van-card v-for="item in options"
                centered
                :title="item.sysElectricCard.electricName"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #footer>
          <van-button type="warning" style="width: 70px;height:30px;font-size:10px"
                      @click="updateStatus(item.id,item.status)" v-if="item.status==0">挂失
          </van-button>
          <van-button type="warning" style="width: 70px;height:30px;font-size:10px"
                      @click="updateStatus(item.id,item.status)" v-else-if="item.status==3">已挂失
          </van-button>
          <van-button type="danger" style="width: 70px;height:30px;font-size:10px" @click="delById(item.id)">删除
          </van-button>
        </template>
      </van-card>
      <van-action-bar>
        <van-action-bar-button type="danger" text="立即购买" @click="onClickButton"/>
      </van-action-bar>
    </van-col>

  </van-row>

  <van-dialog v-model:show="show" title="购买电卡" show-cancel-button @confirm="add()">
    <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="电卡品牌"
        placeholder="选择电卡"
        @click="showPicker = true"
    />
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
      />
    </van-popup>
    <van-field v-model="num" label="购买次数" placeholder="请输入购买次数" @change="jisuan()"/>
    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />
  </van-dialog>
</template>
<script setup>
import {ref} from 'vue'
import {getCardData, updateStatusById, delCard, allCard, addCard} from "@/api/Card"
import {showToast} from "vant";
import {preferential} from "@/api/userinfo.js";

const options = ref([])
onMounted(() => {
  getList();
})
const flag = ref(false);
const getList = async () => {
  const {data} = await getCardData();
  if (data.code == 200) {
    console.log(data.data)
    options.value = data.data;
    if (options.value.length <= 0) {
      flag.value = true
    }
  }
}
//修改状态
const updateStatus = async (id, status) => {
  const {data} = await updateStatusById(id, status);
  if (data.code == 200) {
    getList();
  } else {
    showToast(data.msg);
  }
}
//删除电卡
const delById = async (id) => {
  const {data} = await delCard(id);
  console.log(data.code)
  if (data.code == 200) {
    getList();
  } else {
    showToast(data.msg);
  }
}
const show = ref(false);

const getAllCard = async () => {
  const {data} = await allCard();
  if (data.code == 200) {
    data.data.forEach(item => {
      item.value = item.id;
      item.text = item.electricName
    })
    columns = data.data
    console.log(columns)
  }

}
getAllCard()
let columns = [
  {text: '杭州', value: 'Hangzhou'},
  {text: '宁波', value: 'Ningbo'},
  {text: '温州', value: 'Wenzhou'},
  {text: '绍兴', value: 'Shaoxing'},
  {text: '湖州', value: 'Huzhou'},
];
let columnss = [
  {text: '杭州', value: 'Hangzhou'},
  {text: '宁波', value: 'Ningbo'},
  {text: '温州', value: 'Wenzhou'},
  {text: '绍兴', value: 'Shaoxing'},
  {text: '湖州', value: 'Huzhou'},
];

const fieldValue = ref('');
const fieldValue1 = ref('');
const addform = ref({})
const addform1 = ref({})
const showPicker = ref(false);
const showPicker1 = ref(false);
const cardPrice=ref(0)
const juanPrice=ref(0)
const num=ref(0)
const onConfirm = ({selectedOptions}) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
  addform.value = selectedOptions[0].value
  cardPrice.value=(selectedOptions[0].price )
  jisuan()
};
const onConfirm1 = ({selectedOptions}) => {
  showPicker1.value = false;
  fieldValue1.value = selectedOptions[0].text;
  addform1.value.id = selectedOptions[0].value
  juanPrice.value=selectedOptions[0].perferentialMoney
  jisuan()
};
const onClickButton = () => {
  show.value = true;
}
const add = async () => {
  const {data} = await addCard(addform.value,num.value,addform1.value)
  if (data.code == 200) {
    show.value=false;
    showToast(data.message)
    getList()
  } else {
    showToast(data.message)
  }
}
const router=useRouter();
const onClickLeft=()=>{
  router.replace({name:"userinfo"})
}
const price=ref(0);
//查询所有的优惠卷
// const getAllJuan = async () => {
//   const { data } = await preferential()
//   if (data.code == 200) {
//     data.data.forEach(even=>{
//       even.value=even.id
//       even.text=even.preferentialName
//     })
//     columnss=data.data
//     console.log(columnss)
//   }
//
// }
const jisuan=()=>{
  price.value=cardPrice.value*num.value-juanPrice.value
  price.value=price.value*100
}
// getAllJuan();
const onSubmit=()=>{
  add()
}
</script>